<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>用户页面</title>

<link rel="stylesheet" th:href="@{/css/totalCss.css}">

</head>
<body onload="onload()">
<input type="hidden" id="userId" style="display: none;" th:value = "${session.user.id}">
<input type="hidden" id="userPwd" th:valur = "${session.user.password}">
	<!-- 最外层 -->
	<div class="outer">
		<div class="mask" hidden="True"></div>
		<!-- 左边菜单栏 -->
		<div class="leftBlock">
			<div class="leftMenu">
				<!-- 头像 -->
				<div class="avatar">
					
				</div>
				<div class="btnBlock" id="userInfoBtn">个人信息中心</div>
				<div class="btnBlock" id="enterExamBtn">进入测试</div>
				<div class="btnBlock" id="historyInfoBtn">历史测试信息</div>
			</div>
		</div>
		<!-- 右边模块 -->
		<div class="rightBlock">
			<div style="position:absolute; height: 20px; width: 1120px;top: 28px;left: 375px;background-color: #ffffff;opacity: 0.6;border-radius: 20px;z-index: -1"></div>

			<!-- 个人信息模块 -->
			<div class="rightMask" id="userInfoBlock">
				<div class="dispInfo">
					<div class="infoTitle">个人信息</div>
					<!-- 用户信息显示区域 -->
					<div class="infoBlock">
						<div style="width: 100%;margin-top: 20px;">
							<div class="infoLabel">用户名</div>
							<div class="infoLabelDe" th:text="${session.user.username}"></div>
						</div>
						<div style="width: 100%;margin-top: 20px;">
							<div class="infoLabel">姓名</div>
							<div class="infoLabelDe" th:text="${session.user.name}"></div>
						</div>
						<div style="width: 100%;margin-top: 20px;">
							<div class="infoLabel">测试总数</div>
							<div class="infoLabelDe" th:text="${session.testNum}"></div>
						</div>	
					</div>
					<!-- 修改个人信息按钮 -->
					<div class="alterInfo" id="alterBtn" onclick="">修改个人信息</div>
					<!-- 历史记录表单 -->
					<div class="scroll">
						<div style="width: 90%;word-break:break-all; margin-left: 30px;margin-top: 15px;">
							<div class="historyMaxListTB">
								<div class="historyMaxLabel">类型</div>
								<div class="historyMaxLabel">成绩</div>
								<div class="historyMaxLabel">时间</div>
							</div>
							<div class="historyMaxListTB" th:each="score:${session.scores}">
								<div class="historyMaxLabel" th:text="${score.typeName}"></div>
								<div class="historyMaxLabel" th:text="${score.finalScore}"></div>
								<div class="historyMaxLabel" th:text="${#dates.format(score.time, 'yyyy-MM-dd HH:mm:ss')}"></div>
							</div>
						</div>

					</div>
				</div>
				<div style="margin-top: 140px;">
					<img th:src="@{/images/cat1.gif}" class="imgBg">
				</div>

				<!-- 修改个人信息模块 -->
				<div class="alterInfoBlock">
					<div class="alterInfoTitle">
						修改个人信息
					</div>
					<div class="alterInfoForm">
						<div class="alterInfoLabel">用户昵称</div>
						<div class="alterInfoLabel1"><input type="text" id="alterUsername" class="inputBox" th:value="${session.user.username}"></div>
					</div>
					<div class="alterInfoForm">
						<div class="alterInfoLabel">真实姓名</div>
						<div class="alterInfoLabel1"><input type="text" class="inputBox" th:value="${session.user.name}" disabled></div>
					</div>
					<div class="alterInfoForm">
						<div class="alterInfoLabel">旧密码</div>
						<div class="alterInfoLabel1"><input type="password" id="alterOldPsw" class="inputBox"></div>
					</div>
					<div class="alterInfoForm">
						<div class="alterInfoLabel">新密码</div>
						<div class="alterInfoLabel1"><input type="password" id="alterNewPsw" class="inputBox"></div>
					</div>
					<div style="width: inherit;height: 40px;">
						<div class="confirmAlterBtn" onclick="alterInfo()">确认修改</div>
					</div>
				</div>
			</div>

			<!-- 进入测试模块 -->
			<div class="rightMask" id="examBlock" style="display: block;" hidden="True">
				<div style="height: 20px;"></div>
				<form th:action="@{/exam}" method="get">
					<div class="examTypeChoose">
						<label>算数位数</label>
						<input type="radio" name="digit" id="d2" value="2" hidden checked><label for="d2" class="radioStyle">二位</label>
						<input type="radio" name="digit" id="d3" value="3" hidden><label for="d3" class="radioStyle">三位</label>
						<input type="radio" name="digit" id="d4" value="4" hidden><label for="d4" class="radioStyle">四位</label>
					</div>
					<div class="examTypeChoose">
						<label>算数类型</label>
						<input type="radio" name="type" id="t1" value="1" hidden checked><label for="t1" class="radioStyle">整数</label>
						<input type="radio" name="type" id="t2" value="2" hidden><label for="t2" class="radioStyle">实数</label>
						<input type="radio" name="type" id="t3" value="3" hidden><label for="t3" class="radioStyle">分数</label>
					</div>
					<div class="examTypeChoose">
						<label>测试模式</label>
						<input type="radio" name="modal" id="m1" value="1" hidden checked><label for="m1" class="radioStyle">十分钟测试</label>
						<input type="radio" name="modal" id="m2" value="2" hidden><label for="m2" class="radioStyle">100道题测试</label>
						<input type="radio" name="modal" id="m3" value="3" hidden><label for="m3" class="radioStyle">正确一百题</label>
					</div>
					<div style="width: 100%;display: flex; justify-content: center;">
						<input type="submit" value="开始测试" class="beginBtn">
<!--						<div class="beginBtn" onclick="beginTest()">开始测试</div>-->
					</div>
				</form>

			</div>

			<!-- 历史记录模块 -->
			<div class="rightMask" id="historyBlock" style="display: block;" hidden="True">
				<div class="historyTitle" style="display: block;">历史测试记录</div>
				<div style="width: 90%; word-break:break-all;height: 480px;margin: auto;margin-top: 0px; background-color: #A86256FF;display: block;padding-top: 60px;">
					<div class="historyShowInfoBlcok" id="historyList">
						<div class="historyLabelDiv" id="historyTitle">
							<span class="historyLabel">测试类型</span>
							<span class="historyLabel">分数</span>
							<span class="historyLabel" style="width: 250px;">时间</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/userInfo.js}"></script>

</body>
</html>